<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8" />
        <title>Editor.md examples</title>
		<link rel="stylesheet" href="../css/style.css" />
        <link rel="stylesheet" href="../../css/editormd.preview.css" />
        <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
        <script src="../js/jquery.min.js"></script>
        <script src="../../lib/marked.min.js"></script>
        <script src="../../lib/prettify.min.js"></script>

        <script src="../../lib/raphael.min.js"></script>
        <script src="../../lib/underscore.min.js"></script>
        <script src="../../lib/sequence-diagram.min.js"></script>
        <script src="../../lib/flowchart.min.js"></script>
        <script src="../../lib/jquery.flowchart.min.js"></script>

        <script src="../../editormd.js"></script>
    </head>
    <body>
      <h1 id="h1-editor-md"><a name="Editor.md" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Editor.md</h1><p><img src="https://pandao.github.io/editor.md/images/logos/editormd-logo-180x180.png" alt="">
<p><img src="https://img.shields.io/github/stars/pandao/editor.md.svg" alt=""> <img src="https://img.shields.io/github/forks/pandao/editor.md.svg" alt=""> <img src="https://img.shields.io/github/tag/pandao/editor.md.svg" alt=""> <img src="https://img.shields.io/github/release/pandao/editor.md.svg" alt=""> <img src="https://img.shields.io/github/issues/pandao/editor.md.svg" alt=""> <img src="https://img.shields.io/bower/v/editor.md.svg" alt="">
<p><strong>目录 (Table of Contents)</strong></p>
<div class="editormd-toc-menu"><div class="markdown-toc editormd-markdown-toc">[TOCM]</div></div><br/><div class="markdown-toc editormd-markdown-toc">[TOC]</div><h1 id="h1-heading-1"><a name="Heading 1" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Heading 1</h1><h2 id="h2-heading-2"><a name="Heading 2" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Heading 2</h2><h3 id="h3-heading-3"><a name="Heading 3" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Heading 3</h3><h4 id="h4-heading-4"><a name="Heading 4" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Heading 4</h4><h5 id="h5-heading-5"><a name="Heading 5" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Heading 5</h5><h6 id="h6-heading-6"><a name="Heading 6" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Heading 6</h6><h1 id="h1-heading-1-link-heading-link"><a name="Heading 1 link   Heading link" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Heading 1 link <a href="https://github.com/pandao/editor.md" title="Heading link">Heading link</a></h1><h2 id="h2-heading-2-link-heading-link"><a name="Heading 2 link   Heading link" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Heading 2 link <a href="https://github.com/pandao/editor.md" title="Heading link">Heading link</a></h2><h3 id="h3-heading-3-link-heading-link"><a name="Heading 3 link   Heading link" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Heading 3 link <a href="https://github.com/pandao/editor.md" title="Heading link">Heading link</a></h3><h4 id="h4-heading-4-link-heading-link-heading-link-heading-link"><a name="Heading 4 link   Heading link  Heading link   Heading link" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Heading 4 link <a href="https://github.com/pandao/editor.md" title="Heading link">Heading link</a> Heading link <a href="https://github.com/pandao/editor.md" title="Heading link">Heading link</a></h4><h5 id="h5-heading-5-link-heading-link"><a name="Heading 5 link   Heading link" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Heading 5 link <a href="https://github.com/pandao/editor.md" title="Heading link">Heading link</a></h5><h6 id="h6-heading-6-link-heading-link"><a name="Heading 6 link   Heading link" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Heading 6 link <a href="https://github.com/pandao/editor.md" title="Heading link">Heading link</a></h6><h4 id="h4--heading-underline-"><a name="标题（用底线的形式）Heading (underline)" class="reference-link"></a><span class="header-link octicon octicon-link"></span>标题（用底线的形式）Heading (underline)</h4><h1 id="h1-this-is-an-h1"><a name="This is an H1" class="reference-link"></a><span class="header-link octicon octicon-link"></span>This is an H1</h1><h2 id="h2-this-is-an-h2"><a name="This is an H2" class="reference-link"></a><span class="header-link octicon octicon-link"></span>This is an H2</h2><h3 id="h3-u5B57u7B26u6548u679Cu548Cu6A2Au7EBFu7B49"><a name="字符效果和横线等" class="reference-link"></a><span class="header-link octicon octicon-link"></span>字符效果和横线等</h3><hr>
<p><del>删除线</del> <s>删除线（开启识别HTML标签时）</s><br><em>斜体字</em>      <em>斜体字</em><br><strong>粗体</strong>  <strong>粗体</strong><br><strong><em>粗斜体</em></strong> <strong><em>粗斜体</em></strong></p>
<p>上标：X<sub>2</sub>，下标：O<sup>2</sup></p>
<p><strong>缩写(同HTML的abbr标签)</strong></p>
<blockquote>
<p>即更长的单词或短语的缩写形式，前提是开启识别HTML标签时，已默认开启</p>
</blockquote>
<p>The <abbr title="Hyper Text Markup Language">HTML</abbr> specification is maintained by the <abbr title="World Wide Web Consortium">W3C</abbr>.</p>
<h3 id="h3--blockquotes"><a name="引用 Blockquotes" class="reference-link"></a><span class="header-link octicon octicon-link"></span>引用 Blockquotes</h3><blockquote>
<p>引用文本 Blockquotes</p>
</blockquote>
<p>引用的行内混合 Blockquotes</p>
<blockquote>
<p>引用：如果想要插入空白换行<code>即&lt;br /&gt;标签</code>，在插入处先键入两个以上的空格然后回车即可，<a href="http://localhost/">普通链接</a>。</p>
</blockquote>
<h3 id="h3--links"><a name="锚点与链接 Links" class="reference-link"></a><span class="header-link octicon octicon-link"></span>锚点与链接 Links</h3><p><a href="http://localhost/">普通链接</a></p>
<p><a href="http://localhost/" title="普通链接带标题">普通链接带标题</a></p>
<p>直接链接：<a href="https://github.com">https://github.com</a></p>
<p><a href="http://www.this-anchor-link.com/">锚点链接</a> </p>
<p><a href="mailto:test.test@gmail.com">mailto:test.test@gmail.com</a></p>
<p>GFM a-tail link <a href="https://github.com/pandao" title="@pandao" class="at-link">@pandao</a>  邮箱地址自动链接 <a href="mailto:test.test@gmail.com">test.test@gmail.com</a>  <a href="mailto:www@vip.qq.com">www@vip.qq.com</a></p>
<blockquote>
<p><a href="https://github.com/pandao" title="@pandao" class="at-link">@pandao</a></p>
</blockquote>
<h3 id="h3--codes"><a name="多语言代码高亮 Codes" class="reference-link"></a><span class="header-link octicon octicon-link"></span>多语言代码高亮 Codes</h3><h4 id="h4--inline-code"><a name="行内代码 Inline code" class="reference-link"></a><span class="header-link octicon octicon-link"></span>行内代码 Inline code</h4><p>执行命令：<code>npm install marked</code></p>
<h4 id="h4-u7F29u8FDBu98CEu683C"><a name="缩进风格" class="reference-link"></a><span class="header-link octicon octicon-link"></span>缩进风格</h4><p>即缩进四个空格，也做为实现类似 <code>&lt;pre&gt;</code> 预格式化文本 ( Preformatted Text ) 的功能。</p>
<pre><code>&lt;?php
    echo "Hello world!";
?&gt;
</code></pre><p>预格式化文本：</p>
<pre><code>| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |
</code></pre><h4 id="h4-js-"><a name="JS代码" class="reference-link"></a><span class="header-link octicon octicon-link"></span>JS代码　</h4><pre><code class="lang-javascript">function test() {
    console.log("Hello world!");
}

(function(){
    var box = function() {
        return box.fn.init();
    };

    box.prototype = box.fn = {
        init : function(){
            console.log('box.init()');

            return this;
        },

        add : function(str) {
            alert("add", str);

            return this;
        },

        remove : function(str) {
            alert("remove", str);

            return this;
        }
    };

    box.fn.init.prototype = box.fn;

    window.box =box;
})();

var testBox = box();
testBox.add("jQuery").remove("jQuery");
</code></pre>
<h4 id="h4-html-html-codes"><a name="HTML 代码 HTML codes" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML 代码 HTML codes</h4><pre><code class="lang-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;mate charest="utf-8" /&gt;
        &lt;meta name="keywords" content="Editor.md, Markdown, Editor" /&gt;
        &lt;title&gt;Hello world!&lt;/title&gt;
        &lt;style type="text/css"&gt;
            body{font-size:14px;color:#444;font-family: "Microsoft Yahei", Tahoma, "Hiragino Sans GB", Arial;background:#fff;}
            ul{list-style: none;}
            img{border:none;vertical-align: middle;}
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;h1 class="text-xxl"&gt;Hello world!&lt;/h1&gt;
        &lt;p class="text-green"&gt;Plain text&lt;/p&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<h3 id="h3--images"><a name="图片 Images" class="reference-link"></a><span class="header-link octicon octicon-link"></span>图片 Images</h3><p>Image:</p>
<p><img src="https://pandao.github.io/editor.md/examples/images/4.jpg" alt="">
<blockquote>
<p>Follow your heart.</p>
</blockquote>
<p><img src="https://pandao.github.io/editor.md/examples/images/8.jpg" alt="">
<blockquote>
<p>图为：厦门白城沙滩</p>
</blockquote>
<p>图片加链接 (Image + Link)：</p>
<p><a href="https://pandao.github.io/editor.md/images/7.jpg" title="李健首张专辑《似水流年》封面"><img src="https://pandao.github.io/editor.md/examples/images/7.jpg" alt=""></p>
<blockquote>
<p>图为：李健首张专辑《似水流年》封面</p>
</blockquote>
<hr>
<h3 id="h3--lists"><a name="列表 Lists" class="reference-link"></a><span class="header-link octicon octicon-link"></span>列表 Lists</h3><h4 id="h4--unordered-lists-"><a name="无序列表（减号）Unordered Lists (-)" class="reference-link"></a><span class="header-link octicon octicon-link"></span>无序列表（减号）Unordered Lists (-)</h4><ul>
<li>列表一</li><li>列表二</li><li>列表三</li></ul>
<h4 id="h4--unordered-lists-"><a name="无序列表（星号）Unordered Lists (*)" class="reference-link"></a><span class="header-link octicon octicon-link"></span>无序列表（星号）Unordered Lists (*)</h4><ul>
<li>列表一</li><li>列表二</li><li>列表三</li></ul>
<h4 id="h4--unordered-lists-"><a name="无序列表（加号和嵌套）Unordered Lists (+)" class="reference-link"></a><span class="header-link octicon octicon-link"></span>无序列表（加号和嵌套）Unordered Lists (+)</h4><ul>
<li>列表一</li><li>列表二<ul>
<li>列表二-1</li><li>列表二-2</li><li>列表二-3</li></ul>
</li><li>列表三<ul>
<li>列表一</li><li>列表二</li><li>列表三</li></ul>
</li></ul>
<h4 id="h4--ordered-lists-"><a name="有序列表 Ordered Lists (-)" class="reference-link"></a><span class="header-link octicon octicon-link"></span>有序列表 Ordered Lists (-)</h4><ol>
<li>第一行</li><li>第二行</li><li>第三行</li></ol>
<h4 id="h4-gfm-task-list"><a name="GFM task list" class="reference-link"></a><span class="header-link octicon octicon-link"></span>GFM task list</h4><ul>
<li style="list-style: none;"><input type="checkbox" class="task-list-item-checkbox" checked="checked" disabled="disabled"> GFM task list 1<li style="list-style: none;"><input type="checkbox" class="task-list-item-checkbox" checked="checked" disabled="disabled"> GFM task list 2<li style="list-style: none;"><input type="checkbox" class="task-list-item-checkbox" /> GFM task list 3<ul>
<li style="list-style: none;"><input type="checkbox" class="task-list-item-checkbox"> GFM task list 3-1<li style="list-style: none;"><input type="checkbox" class="task-list-item-checkbox"> GFM task list 3-2<li style="list-style: none;"><input type="checkbox" class="task-list-item-checkbox"> GFM task list 3-3</ul>
</li><li style="list-style: none;"><input type="checkbox" class="task-list-item-checkbox" /> GFM task list 4<ul>
<li style="list-style: none;"><input type="checkbox" class="task-list-item-checkbox"> GFM task list 4-1<li style="list-style: none;"><input type="checkbox" class="task-list-item-checkbox"> GFM task list 4-2</ul>
</li></ul>
<hr>
<h3 id="h3--tables"><a name="绘制表格 Tables" class="reference-link"></a><span class="header-link octicon octicon-link"></span>绘制表格 Tables</h3><table>
<thead>
<tr>
<th>项目</th>
<th style="text-align:right">价格</th>
<th style="text-align:center">数量</th>
</tr>
</thead>
<tbody>
<tr>
<td>计算机</td>
<td style="text-align:right">$1600</td>
<td style="text-align:center">5</td>
</tr>
<tr>
<td>手机</td>
<td style="text-align:right">$12</td>
<td style="text-align:center">12</td>
</tr>
<tr>
<td>管线</td>
<td style="text-align:right">$1</td>
<td style="text-align:center">234</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>First Header</th>
<th>Second Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content Cell</td>
<td>Content Cell</td>
</tr>
<tr>
<td>Content Cell</td>
<td>Content Cell </td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>First Header</th>
<th>Second Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content Cell</td>
<td>Content Cell</td>
</tr>
<tr>
<td>Content Cell</td>
<td>Content Cell</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Function name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>help()</code></td>
<td>Display the help window.</td>
</tr>
<tr>
<td><code>destroy()</code></td>
<td><strong>Destroy your computer!</strong></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th style="text-align:left">Left-Aligned</th>
<th style="text-align:center">Center Aligned</th>
<th style="text-align:right">Right Aligned</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">col 3 is</td>
<td style="text-align:center">some wordy text</td>
<td style="text-align:right">$1600</td>
</tr>
<tr>
<td style="text-align:left">col 2 is</td>
<td style="text-align:center">centered</td>
<td style="text-align:right">$12</td>
</tr>
<tr>
<td style="text-align:left">zebra stripes</td>
<td style="text-align:center">are neat</td>
<td style="text-align:right">$1</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Item</th>
<th style="text-align:right">Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Computer</td>
<td style="text-align:right">$1600</td>
</tr>
<tr>
<td>Phone</td>
<td style="text-align:right">$12</td>
</tr>
<tr>
<td>Pipe</td>
<td style="text-align:right">$1</td>
</tr>
</tbody>
</table>
<hr>
<h4 id="h4--html-entities-codes"><a name="特殊符号 HTML Entities Codes" class="reference-link"></a><span class="header-link octicon octicon-link"></span>特殊符号 HTML Entities Codes</h4><p>&copy; &amp;  &uml; &trade; &iexcl; &pound;<br>& < > ¥ € ® ± ¶ § ¦ ¯ « · 
<p>X² Y³ ¾ ¼  ×  ÷   »</p>
<p>18ºC  "  '</p>
<hr style="page-break-after:always;" class="page-break editormd-page-break" /><h3 id="h3-emoji-smiley-"><a name="Emoji表情 :smiley:" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Emoji表情 <img src="http://www.emoji-cheat-sheet.com/graphics/emojis/smiley.png" class="emoji" title=":smiley:" alt=":smiley:"><blockquote>
<p>Blockquotes <img src="http://www.emoji-cheat-sheet.com/graphics/emojis/star.png" class="emoji" title=":star:" alt=":star:">
</blockquote>
<h4 id="h4-gfm-task-lists-amp-emoji-amp-fontawesome-icon-emoji-amp-editormd-logo-emoji-editormd-logo-5x-"><a name="GFM task lists &amp; Emoji &amp; fontAwesome icon emoji &amp; editormd logo emoji :editormd-logo-5x:" class="reference-link"></a><span class="header-link octicon octicon-link"></span>GFM task lists &amp; Emoji &amp; fontAwesome icon emoji &amp; editormd logo emoji <i class="editormd-logo-5x" title="Editor.md logo (editormd-logo-5x)"></i></h4><ul>
<li style="list-style: none;"><input type="checkbox" class="task-list-item-checkbox" checked disabled /> <img src="http://www.emoji-cheat-sheet.com/graphics/emojis/smiley.png" class="emoji" title="&#58;smiley&#58;" alt="&#58;smiley&#58;" /> <a href="https://github.com/mentions" title="@mentions" class="at-link">@mentions</a>, <img src="http://www.emoji-cheat-sheet.com/graphics/emojis/smiley.png" class="emoji" title="&#58;smiley&#58;" alt="&#58;smiley&#58;" /> #refs, <a href="">links</a>, <strong>formatting</strong>, and <del>tags</del> supported <i class="editormd-logo" title="Editor.md logo (editormd-logo)"></i>;</li><li style="list-style: none;"><input type="checkbox" class="task-list-item-checkbox" checked disabled /> list syntax required (any unordered or ordered list supported) <i class="editormd-logo-3x" title="Editor.md logo (editormd-logo-3x)"></i>;</li><li style="list-style: none;"><input type="checkbox" class="task-list-item-checkbox" checked disabled /> [ ] <img src="http://www.emoji-cheat-sheet.com/graphics/emojis/smiley.png" class="emoji" title="&#58;smiley&#58;" alt="&#58;smiley&#58;" /> this is a complete item <img src="http://www.emoji-cheat-sheet.com/graphics/emojis/smiley.png" class="emoji" title=":smiley:" alt=":smiley:">;<li style="list-style: none;"><input type="checkbox" class="task-list-item-checkbox" /> []this is an incomplete item <a href="#">test link</a> <i class="fa fa-star fa-emoji" title="star"></i> <a href="https://github.com/pandao" title="@pandao" class="at-link">@pandao</a>; </li><li style="list-style: none;"><input type="checkbox" class="task-list-item-checkbox" /> [ ]this is an incomplete item <i class="fa fa-star fa-emoji" title="star"></i> <i class="fa fa-gear fa-emoji" title="gear"></i>;<ul>
<li style="list-style: none;"><input type="checkbox" class="task-list-item-checkbox" /> <img src="http://www.emoji-cheat-sheet.com/graphics/emojis/smiley.png" class="emoji" title="&#58;smiley&#58;" alt="&#58;smiley&#58;" /> this is an incomplete item <a href="#">test link</a> <i class="fa fa-star fa-emoji" title="star"></i> <i class="fa fa-gear fa-emoji" title="gear"></i>;</li><li style="list-style: none;"><input type="checkbox" class="task-list-item-checkbox" /> <img src="http://www.emoji-cheat-sheet.com/graphics/emojis/smiley.png" class="emoji" title="&#58;smiley&#58;" alt="&#58;smiley&#58;" /> this is  <i class="fa fa-star fa-emoji" title="star"></i> <i class="fa fa-gear fa-emoji" title="gear"></i> an incomplete item <a href="#">test link</a>;</li></ul>
</li></ul>
<h4 id="h4--escape"><a name="反斜杠 Escape" class="reference-link"></a><span class="header-link octicon octicon-link"></span>反斜杠 Escape</h4><p>*literal asterisks*</p>
<hr style="page-break-after:always;" class="page-break editormd-page-break" /><h3 id="h3--tex-katex-"><a name="科学公式 TeX(KaTeX)" class="reference-link"></a><span class="header-link octicon octicon-link"></span>科学公式 TeX(KaTeX)</h3><p class="editormd-tex">E=mc^2</p>
<p>行内的公式<span class="editormd-tex">E=mc^2</span>行内的公式，行内的<span class="editormd-tex">E=mc^2</span>公式。</p>
<p class="editormd-tex">x &gt; y</p>
<p class="editormd-tex">(\sqrt{3x-1}+(1+x)^2)</p>
<p class="editormd-tex">\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))</p>
<p>多行公式：</p>
<p class="editormd-tex">\displaystyle
\left( \sum\_{k=1}^n a\_k b\_k \right)^2
\leq
\left( \sum\_{k=1}^n a\_k^2 \right)
\left( \sum\_{k=1}^n b\_k^2 \right)</p><p class="editormd-tex">\displaystyle 
    \frac{1}{
        \Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{
        \frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {
        1+\frac{e^{-6\pi}}
        {1+\frac{e^{-8\pi}}
         {1+\cdots} }
        } 
    }</p><p class="editormd-tex">f(x) = \int_{-\infty}^\infty
    \hat f(\xi)\,e^{2 \pi i \xi x}
    \,d\xi</p><h3 id="h3--page-break"><a name="分页符 Page break" class="reference-link"></a><span class="header-link octicon octicon-link"></span>分页符 Page break</h3><blockquote>
<p>Print Test: Ctrl + P</p>
</blockquote>
<hr style="page-break-after:always;" class="page-break editormd-page-break" /><h3 id="h3--flowchart"><a name="绘制流程图 Flowchart" class="reference-link"></a><span class="header-link octicon octicon-link"></span>绘制流程图 Flowchart</h3><div class="flowchart">st=>start: 用户登陆
op=>operation: 登陆操作
cond=>condition: 登陆成功 Yes or No?
e=>end: 进入后台

st->op->cond
cond(yes)->e
cond(no)->op</div><hr style="page-break-after:always;" class="page-break editormd-page-break" /><h3 id="h3--sequence-diagram"><a name="绘制序列图 Sequence Diagram" class="reference-link"></a><span class="header-link octicon octicon-link"></span>绘制序列图 Sequence Diagram</h3><div class="sequence-diagram">Andrew->China: Says Hello 
Note right of China: China thinks\nabout it 
China-->Andrew: How are you? 
Andrew->>China: I am good thanks!</div><h3 id="h3-end"><a name="End" class="reference-link"></a><span class="header-link octicon octicon-link"></span>End</h3>

    </body>
</html>